<template>
  <div>
    <div class="classify_position">
      <form action="#" @submit.prevent> <!--搜索-->
        <i class="iconfont icon-sou searchIcon" ref="icon" v-if="!word"></i>
        <input type="text" class="search_ipt" placeholder="搜索感兴趣商户" @click="searchWord">
      </form>
      <ul class="hotWord"> <!--热词-->
        <li v-for="text in textList" @click="hotWordSearch(text.CONTENT)">{{text.CONTENT}}</li>
      </ul>
      <classify :imgs="imgs" @getDictInfo="getDictInfo" ref="classify"></classify> <!--主分类选择-->
      <classifyLi :searchDictId="searchDictId" @shadeState="setShadeState"
                  @queryEightMcht="queryEightMcht" :chooseState="shade"></classifyLi> <!--次分类、人均、设施选择-->
    </div>
    <div class="mchtScroll" @touchstart="scrollStart" @touchmove="scrollMove" @touchend="scrollY" ref="mchtScroll">
      <div v-if="shade" class="scroll-shade" @click="shade = false"></div>
      <template v-for="(item,index) in mchtListInfo">
        <mchtListInfo :mchtInfo="item"></mchtListInfo>
        <merch-coupon :couponName="item.couponName" :couponType="item.couponType" :denomination="item.denomination"
                      :validatyEnd="item.validatyEnd" :mchtInfo='item' :flag='true'></merch-coupon>
        <div class="div_space" v-if="(index+1) != mchtListInfo.length"></div>
      </template>
    </div>
  </div>
</template>

<script>
  import getData from 'src/service/getData'
  import * as types from '../../vuex/types.js'
  import getData4 from 'src/service/getData4'

  export default {
    data: () => ({
      textList: [
        {id: 0, CONTENT: '沙拉'},
        {id: 1, CONTENT: '酸菜鱼'},
        {id: 2, CONTENT: '咖啡'},
        {id: 3, CONTENT: '海鲜自助'},
        {id: 4, CONTENT: '必胜客'},
        {id: 5, CONTENT: '凉面'},
      ],
      imgs: [
        {imgUrl: require('./images/meishi.png'), text: '唯有爱和美食不可辜负'},
        {imgUrl: require('./images/life.png'), text: '生活服务，优化生活'},
        {imgUrl: require('./images/yule.png'), text: '娱乐无极限'},
        {imgUrl: require('./images/shopping.png'), text: '购物狂欢'},
        {imgUrl: require('./images/beauty.png'), text: '美丽丽人'},
        {imgUrl: require('./images/healthcare.png'), text: '健康身体，幸福伴随'},
        {imgUrl: require('./images/parenting.png'), text: '亲子互动'},
        {imgUrl: require('./images/eShop.png'), text: '网上商域'}
      ],
      mchtListInfo: [],
      startY: '', // 开始的Y坐标
      endY: '', // 手指离开时的坐标
      word: '', // 搜索词
      searchDictId: '', // 搜索的分类ID
      shade: false, // 遮罩开启关闭
    }),
    methods: {
      async queryEightMcht(params) { // 商户搜索
        this.$store.commit('changeState', true);
        let result = typeof(params.data.mchtType) === "number" ? await getData.queryEightMcht(params) : await getData.merList(params);
        this.mchtListInfo = result.content.mchtList;
        window.scrollTo(0, 0);
      },
      setShadeState(state) {  // 遮罩开启关闭
        this.shade = state
      },
      getDictInfo(info) {
        this.searchDictId = info.dict // 次分类id获取
      },
      searchWord() { // 调整搜索历史页
        this.$router.push({
          name: "search",
          query: {
            type: 'home'
          }
        });
      },
      hotWordSearch(text) { // 按热词搜索，调整搜索商户页面
        this.$store.commit(types.GET_PAGE_NUM, 1);
        this.$store.commit("search_key", text); // 搜索内容
        this.$store.commit("search_type", 'mecth'); //设置搜索类型
        this.$store.commit(types.coupon_tit, '全部');
        this.$router.push({
          name: 'couponSearch',
          query: {type: true}
        })
      },
      scrollStart(e) {
        let touch = e.targetTouches[0];
        this.startY = touch.pageY;
      },
      scrollMove(e) {
        let touch = e.targetTouches[0];
        this.endY = touch.pageY;
      },
      scrollY() {
        if (this.endY) {
          this.endY - this.startY < 0 ? this.$refs.classify.closeState() : '';
          this.endY = 0
        }
      }
    },
    async created() {
      getData4.getSearchRecord({
        type: 'mcht'
      }).then(data => this.textList = data.content)
    },
    components: {
      classify: () => import('src/componentes/local/classifyChoose.vue'),
      classifyLi: () => import('src/componentes/local/classifyChooseLi.vue'),
      mchtListInfo: () => import('src/pages/merchant/mcht'),
    }
  }
</script>

<style lang="scss" scoped="">
  .classify_position {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: #ededed;
  }

  form {
    padding-top: 8px;
    .searchIcon {
      position: absolute;
      top: 1.15rem;
      left: 8.7rem;
      z-index: 100;
      font-size: 1.1rem;
    }

    .search_ipt {
      width: 93.5%;
      height: 2.2rem;
      margin: auto;
      box-shadow: -4px 0px 4px #f0f0f0, //左边
      0px -4px 4px #f0f0f0, //上
      4px 0px 4px #f0f0f0, //右
      0px 4px 4px #f0f0f0; //下
      border-radius: 20px;
      text-indent: 38%;
    }
    .search_ipt::-webkit-input-placeholder {
      font-size: .9rem;
      color: #999999;
    }
  }

  /*搜索热词*/
  ul.hotWord {
    display: -webkit-flex;
    display: flex;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 0.8rem;
    li {
      font-size: 0.85rem;
      flex: auto;
      text-align: center;
      color: rgb(153, 153, 153);
    }
  }

  .coupon_bot {
    border: 0;
    background-color: #ffffff;
    margin-top: 0;
  }

  .coupon_detail_wrp {
    border-bottom: 1px dotted red;
  }

  .mchtScroll {
    position: static;
    height: 100%;
    overflow: scroll;
    z-index: -100;
    padding-top: 14.8rem;
    .scroll-shade {
      position: fixed;
      top: 14.8rem;
      width: 100%;
      height: 100%;
      z-index: 2;
      background-color: rgba(0, 0, 0, .7);
    }
  }
</style>